<template>
  <a :href="'/#/view/'+activeItem.cid" target="_blank" :style="{'background-image':'url('+ activeItem.image +')'}" class="head-slideShow">
    <div ref="sliderNav" class="slider-nav">
      <div @click.prevent="clickItem(item)" v-for="(item,index) in displayVideos" :key="index" class="nav-item" @mouseenter="hoverItem(index)" @mouseleave="mouseLeaveItem()" :class="{active:activeIndex===index}">
        <div class="name">{{item.title}}</div>
        <div class="desc">{{item.desc}}</div>
      </div>
    </div>
  </a>
</template>

<script>
export default {
  name: 'HeadSlideShow',
  data () {
    return {
      activeIndex: 0
    };
  },
  computed: {
    activeItem: function () {
      return this.$SLIDE_DATA[this.activeIndex];
    },
    displayCount: function () {
      return this.$SLIDE_DATA.length;
      let count = 8;
      let appRightWidth = this.$store.state.appRightWidth;
      if (appRightWidth > 1000) {
        ++count;
      }
      if (appRightWidth > 1100) {
        ++count;
      }
      if (appRightWidth > 1200) {
        ++count;
      }
      if (appRightWidth > 1300) {
        ++count;
      }
      return count;
    },
    displayVideos: function () {
      return this.$SLIDE_DATA.slice(0, this.displayCount);
    }
  },
  methods: {
    clickItem: function (item) {
      window.open(item.link_url);
    },
    hoverItem: function (index) {
      this.activeIndex = index;
      this.userHover = true;
    },
    mouseLeaveItem: function () {
      this.userHover = false;
    }
  },
  mounted () {
    let self = this;
    this.sliderInterval = window.setInterval(() => {
      if (!self.userHover) {
        self.activeIndex++;
        if (self.activeIndex >= self.displayCount) {
          self.activeIndex = 0;
        }
      }
    }, 3000);
  },
  beforeDestroy () {
    window.clearInterval(this.sliderInterval);
  }
};
</script>
<style src="./index.scss" lang="scss" scoped></style>
